<template>
<div class="loginBox">
  <div class="login">
    <div class="box">
      <div class="work"><img src="https://static.zhipin.com/v2/web/geek/images/logo.png" alt="">
        <div>
          <a href="/">
            <p>找工作</p>
          </a>
          <a href="/">
            <p>上BOSS直聘直接谈</p>
          </a>
        </div>
      </div>
      <div class="work2">
        <img src="https://img2.baidu.com/it/u=2721744129,3342222959&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=500" alt="">
        <div>
          <h4>沟通</h4>
          <p>在线职位及时沟通</p>
        </div>
      </div>
      <div class="work3">
        <img src="https://img0.baidu.com/it/u=906405806,25286934&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        <div>
          <h4>任性选</h4>
          <p>各大行业职位任你选</p>
        </div>
      </div>
    </div>
    <div class="zhao">
      <div class="an">
        <button>我要找工作</button>
        <button>我要招聘</button>
      </div>

      <!-- <el-form-item label="用户名" :label-width="formLabelWidth"> -->
        <input type="text" class="text" v-model="form.phoneNumber">
        <div class="tip">
          <span>
            *
          </span>请输入手机号
        </div>
        <br>
      <!-- </el-form-item> -->

      <!-- <el-form-item label="密码" :label-width="formLabelWidth"> -->
        <input type="password" class="password" v-model="form.password">
        <div class="tip"><span>*</span>请输入密码</div>
      <!-- </el-form-item> -->

      <button class="dier" @click="login" >登录</button>
      <br>
      <p class="disan">客服电话 400-065-5799 工作时间:9:30-18:30</p>
      <p class="disi">人力资源服务许可证|营业执照|朝阳区人社局监督电话</p>
    </div>
  </div></div>
</template>

<script>
import { useUser } from "@/api";
import { mapMutations } from "vuex";
import tools from "@/tools";

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 将来时的路由信息，绑定到实例身上，以备登录成功后，跳转使用
      vm.from = from;
    })
  },
  data() {
    return {
      formLabelWidth: "200px",
      form: {
        phoneNumber: '',
        password: '',
        // password2: '',
        // checkCode: '',
      },
      logType: {
        title: "登录",
        type: "login"
      },
      isReg: false,
      pw: "",
      //测试登录
      userData: "",
      RegCheck: /^[1][3,4,5,7,8][0-9]{9}$/
    }
  },
  methods: {
    ...mapMutations({
      set_isLogin: "user/set_isLogin",
      set_username: "user/set_username",
      set_password: "user/set_password"
    }),
    toReg() {
      // 显示注册表单
      this.dialogFormVisible = true;
      this.logType.title = "注册";
      this.logType.type = "register";
      this.isReg = true;
      this.clearFormValue();
    },
    toLog() {
      // 显示登录表单
      this.dialogFormVisible = true;
      this.logType.title = "登录";
      this.logType.type = "login";
      this.isReg = false;
      this.clearFormValue();
    },
    onSubmit() {
      // 提交之后的功能
      // 计划在注册成功后，自动登录，所以需要将密码临时存储起来（注册成功后，用户名会自动返回）
      this.pw = this.form.password;

      // 使用平台的登录或注册接口
      useUser(this.logType.type, {
        username: this.form.username,
        password: this.form.password,
        repassword: this.form.password2
      }).then(res => {
        // 登录或注册完成
        // console.log(res.data);

        // 登录或注册失败
        if (res.data.errorCode === -1) {
          // 错误提示
          this.$message.error(res.data.errorMsg);
        } else if (this.logType.type === "login") {
          // 登录成功后要执行的功能
          this.loginSuccess(res.data.data)
        } else if (this.logType.type === "register") {
          // 注册成功后要执行的功能
          this.registerSuccess(res.data.data);
        };
      })

      this.clearFormValue();
    },
    loginSuccess(data) {
      // 隐藏对话框
      this.dialogFormVisible = false;
      // 提示信息
      this.$message({
        message: '恭喜你，登录成功',
        type: 'success'
      });

      const d = new Date();
      d.setDate(d.getDate() + 30);
      document.cookie = "isLogin=ok;expires=" + d;

      // 登录成功后，将登录成功产生的信心，保存到状态管理器（vuex）中，以便将来在其他组件中使用
      // this.$store.commit("user/set_isLogin", "ok");
      this.set_isLogin("ok");

      // this.$store.commit("user/set_username", data.username);
      this.set_username(data.username);

      // this.$store.commit("user/set_password", tools.getCookie("token_pass"));
      this.set_password(tools.getCookie("token_pass"))

      // 登录成功后，修改视图上的用户名信息
      // this.username = this.$store.state.user.username;

      // 登录成功后，要跳转到来时的路由
      this.$router.push(this.from.path);
    },
    registerSuccess(data) {
      this.dialogFormVisible = false;
      this.$message({
        message: '恭喜你，注册成功',
        type: 'success'
      });
      // 注册成功后，自动登录
      useUser("/login", {
        username: data.username,
        password: this.pw
      }).then(res => {
        if (res.data.errorCode === -1) {
          this.$message.error(res.data.errorMsg);
        } else {
          this.loginSuccess(res.data.data)
        }
      })
    },
    clearFormValue() {
      this.form.username = "";
      this.form.password = "";
      this.form.password2 = "";
      this.form.checkCode = "";
    },
    //测试登录
    login(){
      // 判断登录用户信息
      if(this.form.phoneNumber === ""){
        alert("请输入正确的手机号");
      }else{
        // 判断手机号是否匹配
        if(this.form.phoneNumber === this.userData.phoneNumber){
          if(this.form.password === this.userData.password1){
            // alert("登录成功");
            this.$router.push({
              name: "home"
            });
          }else{
            alert("用户名或密码错误");
          }
        }else{
          alert("没有对应的手机号");
        }
      }
    }
  },
  // 测试登录
  created(){
    const userData = localStorage.getItem("userInfo");
    if(userData){

      this.userData = JSON.parse(userData);
    }
    console.log(this.userData);
  }

}
</script>

<style lang="less" scoped>
body{
  width:100%;
  height:800px;
  margin: 0;
  padding: 0;
  background-image: url(https://static.zhipin.com/zhipin-geek/v537/web/geek/images/newbg.png);
  background-repeat: repeat;
  background-color: #5dd5c8;
}

a {
  text-decoration: none;
}
.loginBox{
  display: flex;
  height: 100%;
  width: 100%;
   background: url(https://static.zhipin.com/zhipin-geek/v537/web/geek/images/newbg.png) #5dd5c8;
}
.login {
  height: 520px;
  width: 730px;
  margin: 90px auto;
  background: white;
  border-radius: 10px;
  display: flex;
}

.zhao {
  width: 500px;
  flex-direction: column;
}

p {
  margin: 0;
  padding: 0;
  color: #8d92a1;
  font-size: 12px;
}

h4 {
  margin: 0;
  padding: 0;
  color: #8d92a1;
}

.box {
  background: #f8fcff;
  border-radius: 10px 0 0 10px;
  flex: 1;
}

.work {
  display: flex;
  margin: 80px 30px 0px 30px;
}

.work img {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.work p {
  color: #5dd5c8;
  font-size: 15px;
}

.work2 {
  display: flex;
  margin: 50px 30px;
}

.work2 img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.work3 {
  display: flex;
  margin: 0px 30px;
}

.work3 img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.an {
  width: 350px;
  margin: 60px auto 0px;
}

button {
  background: white;
  width: 150px;
  height: 40px;
  margin-left: 10px;
  border: 1px solid #ccc;
}

button:hover {
  border: 1px solid #5dd5c8;
  color: #5dd5c8;
}

.diyi {
  margin-right: 50px;
}

input {
  width: 350px;
  height: 40px;
  margin: 40px 73px 0px 73px;
}

input:active {
  border: 1px solid #5dd5c8;
}

.dier {
  width: 350px;
  height: 40px;
  margin: 40px 73px 0px 73px;
  color: #f8fcff;
  background: #5dd5c8;
  font-size: 17px;
}

.disan {
  margin: auto;
  padding-left: 120px;
  margin-top: 30px;
}

.disi {
  margin: auto;
  padding-left: 100px;
  margin-top: 10px;
}

.tip {
  color: #8d92a1;
  margin-left: 75px;
}

span {
  color: red;
  font-size: 20px;
}
</style>